<template>
  <div class="register-box">
    <div class="registerForm">
      <el-form :model="registerForm" :rules="registerRules" ref="registerFormRef">
        <div class="title">
          <div class="title-left">会员注册</div>
          <div class="title-right">已注册可<a href="#/login">直接登录</a></div>
        </div>
        <el-form-item prop="username">
          <el-input v-model="registerForm.username" prefix-icon="el-icon-user-solid" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="email">
          <el-input v-model="registerForm.email" prefix-icon="el-icon-message" placeholder="邮箱"></el-input>
        </el-form-item>
        <!-- <el-form-item prop="code">
                    <el-input v-model="registerForm.code" prefix-icon="el-icon-circle-check" placeholder="验证码" style="width: 63%"></el-input>
                    <div class="login-code" >
                        <el-button>获取验证码</el-button>
                    </div>
                </el-form-item> -->
        <el-form-item prop="password">
          <el-input v-model="registerForm.password" prefix-icon="el-icon-s-goods" type="password" placeholder="密码" show-password></el-input>
        </el-form-item>
        <el-form-item prop="passwordAgain">
          <el-input v-model="registerForm.passwordAgain" prefix-icon="el-icon-s-goods" type="password" placeholder="确认密码" show-password @keyup.enter.native="handleRegister"></el-input>
        </el-form-item>
        <div class="agree">
          <div>
            <el-checkbox v-model="agreement"></el-checkbox>
          </div>
          <div class="txt"> 我已阅读并接受以下条款：
            <span><a href="#">《唯品会服务条款》</a> <a href="#">《隐私条款》</a><a href="#">《唯品支付用户服务协议》</a></span>
          </div>
        </div>
        <el-form-item>
          <el-button :loading="loading" type="primary" style="width: 100%;" @click.native.prevent="handleRegister">
            <span v-if="!loading">立 即 注 册</span>
            <span v-else>注 册 中...</span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    // 邮箱地址自定义校验变量
    var validateEmail = (rule, value, callback) => {
      var regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (value === '') {
        callback(new Error('请填写电子邮箱'))
      } else if (value !== '' && !regEmail.test(value)) {
        callback(new Error('邮箱格式不正确'))
      }
      callback()
    }
    // 重新输入密码验证
    const repwdCheck = async (rule, value, callback) => {
      if (value !== this.registerForm.password) {
        return callback(new Error('两次密码输入不一致！'));
      } else {
        callback()
      }
    }
    return {
      agreement: true,
      loading: false,
      registerForm: {
        username: '',
        password: '',
        passwordAgain: '',
        email: ''
      },
      registerRules: {
        username: [
          { required: true, trigger: 'blur', message: '请输入用户名' },
          { min: 3, max: 8, message: '长度在3-8字符之间', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 15, message: '长度在6-15字符之间', trigger: 'blur' }
        ],
        passwordAgain: [
          { required: true, message: '请输入确认密码', trigger: 'blur' },
          { validator: repwdCheck, trigger: 'blur' },
          { min: 6, max: 15, message: '长度在6-15字符之间', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入登陆邮箱', trigger: 'blur' },
          { validator: validateEmail, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleRegister() {
      // this.loading = true
      // setTimeout(() => {
      //     this.loading = false
      // }, 2000)

      this.$refs.registerFormRef.validate(async (valid) => {
        if (valid) {
          this.loading = true
          let params = {}
          params = JSON.parse(JSON.stringify(this.registerForm))
          params.password = this.$md5(params.password)
          params.passwordAgain = this.$md5(params.passwordAgain)
          const { data: res } = await this.$http.post('/user/register', params)
          console.log(res)
          if (res.code === 200) {
            this.$refs.registerFormRef.resetFields()
            this.loading = false
            return this.$message.success('用户注册成功！')
          }
          this.loading = false
          return this.$message.warning('注册失败')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.register-box {
  width: 100%;
  min-width: 1200px;
  height: calc(100% - 170px);
  min-height: 500px;
  background: url(../../assets/images/bg/login_bg.jpg) no-repeat 55% 0;
  position: relative;
  .registerForm {
    width: 370px;
    height: 450px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 1);
    padding: 25px 25px 5px 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(45%, -50%);
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ddd;
      height: 35px;
      margin-bottom: 25px;
      padding-bottom: 10px;
      color: #666;
      .title-left {
        font-size: 18px;
        font-weight: bold;
      }
      .title-right {
        font-size: 14px;
        a {
          color: #f10180;
          text-decoration: none;
        }
      }
    }
    .login-code {
      float: right;
      cursor: pointer;
    }
    .agree {
      // height: inherit;
      display: flex;
      justify-content: space-between;
      .txt {
        color: #333;
        font-family: 微软雅黑;
        font-size: 12px;
        vertical-align: middle;
        line-height: 1.5;
        padding: 2px 0px 20px 10px;
        a {
          text-decoration: none;
          color: #1d94d1;
          transition: all 0.2s;
        }
        a:hover {
          color: #90d0f0;
        }
      }
    }
  }
}
</style>